<article>
  <section class="markdown"><h1>Input 输入框</h1>
    <section class="markdown"><p>通过鼠标或键盘输入内容，是最基础的表单域的包装。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <ul>
        <li><p>需要用户输入表单域内容时。</p></li>
        <li><p>提供组合型输入框，带搜索的输入框，还可以进行大小选择。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本使用'" id="components-input-demo-basic" [nzCode]="NzDemoInputBasicCode">
        <nz-demo-input-basic demo></nz-demo-input-basic>
        <div intro>
          <p>基本使用。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'前置/后置标签'" id="components-input-demo-add-on" [nzCode]="NzDemoInputAddOnCode">
        <nz-demo-input-add-on demo></nz-demo-input-add-on>
        <div intro>
          <p>用于配置一些固定组合</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'搜索框'" id="components-input-demo-search" [nzCode]="NzDemoInputSearchCode">
        <nz-demo-input-search demo></nz-demo-input-search>
        <div intro>
          <p>带有搜索按钮的输入框。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'适应文本高度的文本域'" id="components-input-demo-textarea-auot-size" [nzCode]="NzDemoInputTextareaAutoSizeCode">
        <nz-demo-input-textarea-auot-size demo></nz-demo-input-textarea-auot-size>
        <div intro>
          <p><code>nzAutosize</code> 属性适用于 <code>textarea</code> 节点，并且只有高度会自动变化。另外 <code>nzAutosize</code>  可以设定为一个对象，指定最小行数和最大行数。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'前缀与后缀'" id="components-input-demo-affix" [nzCode]="NzDemoInputAffixCode">
        <nz-demo-input-affix demo></nz-demo-input-affix>
        <div intro>
          <p>在输入框上添加前缀或后缀图标。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'三种大小'" id="components-input-demo-size" [nzCode]="NzDemoInputSizeCode">
        <nz-demo-input-size demo></nz-demo-input-size>
        <div intro>
          <p>我们为 <code>nz-input</code> 输入框定义了三种尺寸（大、默认、小），高度分别为 <code>32px</code>、<code>28px</code> 和 <code>22px</code>。
          </p>
          <p>注意： 在表单里面，我们只使用大尺寸的输入框。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'输入框组合'" id="components-input-demo-group" [nzCode]="NzDemoInputGroupCode">
        <nz-demo-input-group demo></nz-demo-input-group>
        <div intro>
          <p>输入框的组合展现。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'文本域'" id="components-input-demo-textarea" [nzCode]="NzDemoInputTextareaCode">
        <nz-demo-input-textarea demo></nz-demo-input-textarea>
        <div intro>
          <p>用于多行输入，指定 <code>nzType</code> 为一个特殊的 <code>textarea</code>。可以用 <code>nzRows</code> 或是 <code>nzAutosize</code> 来控制框的高度。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <h3 id="Input"><span>nz-input</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>当前input数值，可以双向绑定</td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzType</td>
          <td>【必须】声明 input 类型，同原生 input 标签的 type 属性。另外提供 <code>nzType="textarea"</code>。</td>
          <td>String</td>
          <td>'text'</td>
        </tr>
        <tr>
          <td>nzPlaceHolder</td>
          <td>在文字框中显示提示讯息</td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。</td>
          <td>'large'|'default'|'small'</td>
          <td>'default'</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>是否禁用状态，默认为 false</td>
          <td>bool</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzReadonly</td>
          <td>是否只读状态，默认为 false</td>
          <td>bool</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzBlur</td>
          <td>失去焦点回调</td>
          <td>EventEmitter</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzFocus</td>
          <td>获取焦点回调</td>
          <td>EventEmitter</td>
          <td>无</td>
        </tr>
        <tr>
          <td>#addonBefore</td>
          <td>设置前置标签</td>
          <td>ng-template</td>
          <td>-</td>
        </tr>
        <tr>
          <td>#addonAfter</td>
          <td>设置后置标签</td>
          <td>ng-template</td>
          <td>-</td>
        </tr>
        <tr>
          <td>#prefix</td>
          <td>带有前缀图标的 input</td>
          <td>ng-template</td>
          <td>-</td>
        </tr>
        <tr>
          <td>#suffix</td>
          <td>带有后缀图标的 input</td>
          <td>ng-template</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    <h4 id="Input.TextArea"><span>nz-input[type=textarea]</span>
      <!-- <a class="anchor">#</a> -->
    </h4>
    <p>当 <code>nzType="textarea"</code> 时，特有的API</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzAutosize</td>
          <td>自适应内容高度，可设置为 true|false 或对象：<code>{{'{ minRows: 2, maxRows: 6 }'}}</code></td>
          <td>Boolean|Object</td>
          <td><code>false</code></td>
        </tr>
        <tr>
          <td>nzRows</td>
          <td>控制固定框的行数</td>
          <td>String</td>
          <td>无</td>
        </tr>
      </tbody>
    </table>
    <h4 id="Input.Group"><span>nz-input-group</span>
      <!-- <a class="anchor">#</a> -->
    </h4>
    <p>在nz-input-group中需要使用[nz-input]的directive，而非component进行组合，具体见demo</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzSize</td>
          <td><code>nz-input-group</code> 中所有的 <code>nz-input</code> 的大小</td>
          <td>'large'|'default'|'small'</td>
          <td>'default'</td>
        </tr>
        <tr>
          <td>nzCompact</td>
          <td>是否用紧凑模式</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>
